Co nowego w wersji internetowej

Zadbaj o dobrą organizację dzięki kolekcji Zapisuj i kategoryzuj treści zgodnie ze swoimi preferencjami.

Rachel Andrew

Data publikacji: 20 maja 2025 r.

Podczas konferencji Google I/O 2025 w ramach prezentacji „Co nowego w internecie” zostały przedstawione wszystkie ogłoszenia dotyczące Baseline, a także niektóre z funkcji, które zostały dodane do Baseline w tym roku. To był niesamowity rok dla internetu i Baseline. Ten post zawiera podsumowanie wszystkich wspomnianych kwestii oraz linki, które pozwolą dowiedzieć się więcej.

Panel platformy internetowej i funkcje internetowe

W 2024 r. ogłosiliśmy pierwsze wdrożenie panelu Platformy internetowej, który korzysta z zestawu danych o funkcjach internetowych. Dzięki temu możesz zapoznać się ze wszystkimi funkcjami wchodzącymi w skład Podstawy.

Dane o funkcjach internetowych są teraz kompletne i zawierają wszystkie funkcje platformy. W miarę dodawania nowych funkcji do Baseline co miesiąc dane są aktualizowane i wyświetlane na pulpicie.

Narzędzia, które pomogą Ci znaleźć własny docelowy wynik bazowy

Możesz oprzeć zasady obsługi przeglądarki na ruchomym celu dostępnej powszechnie wartości bazowej (np. aplikacji Clearleft firmy z Wielkiej Brytanii), ale możesz też przyjąć stały cel na podstawie roku bazowego. Możesz teraz używać własnych danych o użytkownikach oraz danych o funkcjach internetowych, aby określać najlepsze grupy odbiorców.

W zeszłym roku na konferencji I/O ogłosiliśmy, że RUMvision wprowadzi w swojej usłudze integrację z Baseline. Ta integracja jest już dostępna.

Korzysta ona z danych RUM, dzięki czemu pomaga określić, który rok bazowy należy przyjąć na podstawie tych danych, a nie globalnej średniej. Możesz też sprawdzić, czy dostępne w wielu krajach podstawowe dane wyjściowe są dla Ciebie odpowiednie.

Możesz też użyć danych Google Analytics, aby wyraźnie zobaczyć, jaki odsetek użytkowników wspiera każdy cel wartości bazowej za pomocą nowego narzędzia Google Analytics Baseline Checker.

To tylko 2 z rosnącej kolekcji narzędzi, które pomagają Ci mapować dane o prawdziwych użytkownikach na potrzeby funkcji Podstawy.

Grupa społeczności Web DX niedawno wprowadziła rozszerzenie do Netlify, które pokazuje obsługę różnych lat bazowych i dostępnych powszechnie witryn. Dzięki temu łatwiej będzie Ci określić, na co się skupić w narzędziach do tworzenia. Wkrótce udostępnimy integrację z produktem Observatory RUM firmy Cloudflare oraz z Contentsquare.

Integracja danych z Twoimi narzędziami

Dane o funkcjach internetowych są dostępne do integracji. Staramy się to ułatwić.

Użyj interfejsu Web Platform Dashboard API lub pobieraj dane web-features bezpośrednio z pakietu npm.

Teraz możesz mapować wersje przeglądarek na docelowe wartości bazowe za pomocą modułu baseline-browser-mapping z grupy społeczności W3C WebDX. Moduł ten może być używany w środowisku JavaScript po stronie serwera lub po pobraniu plików JSON lub CSV, które są codziennie aktualizowane z repozytorium.

Te dane obejmują mapowania nie tylko dla podstawowego zestawu przeglądarek podstawowych, ale też przeglądarek następnych, takich jak Samsung Internet, Opera, UC Browser i Android Webview.

Dowiedz się, czy funkcje są obsługiwane przez docelową wartość bazową

Podstawowe informacje są teraz dostępne na większości stron MDN i Can I Use, a także w panelu Web Platform i artykułach w web.dev oraz CSS Tricks. W takim przypadku musisz skontaktować się z zespołem pomocy. Znacznie przydatniejsze byłoby wyświetlanie informacji o wartościach docelowych w Twoim środowisku IDE podczas pisania kodu oraz we wszystkich innych używanych narzędziach.

Z przyjemnością informujemy, że wiele kluczowych narzędzi ma teraz wbudowane wsparcie dla Podstawy lub jest z nim łatwo zintegrowane.

browserslist-config-baseline

Wiele narzędzi, takich jak Babel i PostCSS, korzysta z listy przeglądarek, aby określić, które przeglądarki obsługiwać.

Wspólnie z zespołem WebDX CG i członkami społeczności Chrome pomogła w wypuszczeniu nowego narzędzia o nazwie browserslist-config-baseline. Dzięki temu możesz konfigurować listy docelowych przeglądarek pod kątem wartości bazowych, np. „powszechnie dostępne” lub „lata bazowe”.

Dzięki temu każde narzędzie, które przyjmuje listę docelowych przeglądarek, może teraz być wyrażane w formie wartości docelowej.

Więcej informacji znajdziesz w artykule Używanie wartości domyślnych z listy browserslist.

Punkt odniesienia w narzędziach do sprawdzania kodu: ESLint i Stylelint

Korzystanie z Baseline z narzędziami do sprawdzania kodu zostało niedawno umożliwione dzięki kilku nowym narzędziom do sprawdzania kodu, w tym ESLint dla CSS.

Punkt odniesienia ESLint zawiera regułę use-baseline. Możesz ustawić tutaj preferowany docel docel bazowy. Gdy używasz funkcji, które są nowsze niż Twój cel, pojawi się ostrzeżenie. Możesz wybrać sposób rozwiązania tych ostrzeżeń: zastąpić tę funkcję elementami prymitywnymi lub stłumić ostrzeżenie linter, co jest w pełni akceptowalnym rozwiązaniem, jeśli wiesz, że używasz zaawansowanej funkcji w bezpieczny sposób, na przykład gdy jest to funkcja stopniowego ulepszania.

Domyślnie ESLint nie będzie ostrzegać, jeśli nowsze funkcje są używane w blokach @supports, ponieważ przeglądarki, które nie są obsługiwane, i tak ich nie zinterpretują.

Jeśli chcesz stosować linting HTML, możesz też skorzystać z wtyczki społecznościowej html-eslint.

Stylelint oficjalnie obsługuje wtyczkę o nazwie stylelint-plugin-use-baseline. Ta reguła działa tak samo jak reguła ESLint dla CSS, ale jest uruchamiana w Stylelint.

Wiele narzędzi do sprawdzania kodu ma też wtyczki do IDE, dzięki którym możesz otrzymywać natychmiastowe informacje o stanie kodu bazowego podczas pisania kodu w postaci falujących podkreśleń.

Punkt odniesienia w VS Code i JetBrains WebStorm

Wiele środowisk IDE od dawna umożliwia wyświetlanie listy obsługiwanych wersji przeglądarek po najechaniu kursorem na daną funkcję w edytorze.

Trudno jednak stwierdzić, czy dana funkcja jest bezpieczna w użyciu – trzeba samodzielnie sprawdzić, czy na liście brakuje którejś z popularnych przeglądarek i jak nowa jest jej wersja.

Aby rozwiązać ten problem, nawiązaliśmy współpracę z twórcami najpopularniejszego środowiska IDE używanego przez miliony programistów webowych, czyli VS Code, aby zintegrować dane Baseline bezpośrednio w kartach informacyjnych.

Możesz teraz najechać kursorem na funkcję, aby dowiedzieć się, czy jest ona uznawana za podstawową i jak długo, lub czy są jakieś główne przeglądarki, które nie wdrożyły jeszcze tej funkcji w pełni.

Obsługiwane funkcje to m.in. właściwości CSS, elementy HTML i atrybuty HTML. Więcej informacji znajdziesz w artykule Visual Studio Code obsługuje teraz Baseline.

Ta integracja oznacza, że wszystkie środowiska IDE oparte na VS Code również skorzystają z tych kart.

Możemy też ogłosić, że JetBrains wdraża karty informacyjne w swoim środowisku IDE WebStorm JavaScript i TypeScript.

Internet rozwija się szybciej niż kiedykolwiek

Mamy nadzieję, że Baseline pomoże Ci wykorzystać fakt, że interoperacyjność internetu rozwija się szybciej niż kiedykolwiek.

W panelu platformy internetowej możesz wyświetlić wszystkie funkcje, które stały się dostępne w ramach podstawowej wersji w ciągu ostatnich 12 miesięcy (od Google I/O 2024).

Możesz też mieć pewność, że wkrótce udostępnimy nowe funkcje w ramach poziomu podstawowego, ponieważ są one częścią projektu Interop 2025. Więcej informacji o dostępnych funkcjach znajdziesz w artykule Interop2025: kolejny rok ulepszania platformy internetowej.

Tryby pisania poziomego

Jedna funkcja została już udostępniona jako nowa wartość domyślna: wartości sideways-rl i sideways-lr właściwości writing-mode w kodzie CSS. Jeśli używasz trybu pisania pionowego wyłącznie do celów związanych z układem, prawdopodobnie lepszym wyborem będą wartości poziome.

h1 {
  writing-mode: sideways-rl;
}

h2 {
  writing-mode: sideways-lr;
}

Umieszczenie kotwicy

Umieszczanie kotwicy w Chrome 125. Umożliwia to powiązanie pozycji elementu z punktem zakotwiczenia, np. podczas otwierania etykiety za pomocą przycisku.

Jest ona teraz uwzględniona w Interop 2025, więc powinna dołączyć do Baseline jeszcze w tym roku.

Podstawowe wskaźniki internetowe: LCP i INP

LCP API

Interfejs Event Timing API (do INP)

Wskaźniki internetowe pomogą Ci ocenić wygodę korzystania z Twojej witryny i ustalić, co jeszcze możesz w niej poprawić. Celem inicjatywy Web Vitals jest uproszczenie obrazu i pomaganie witrynom w skupieniu się na najważniejszych danych, czyli podstawowych wskaźnikach internetowych.

Interoperacyjność 2025 obejmuje wskaźniki największego wyrenderowania treści (LCP) i interakcji do kolejnego wyrenderowania (INP), które są realizowane przez implementację interfejsu API LargestContentfulPaint i interfejsu Event Timing API w różnych przeglądarkach.

Ulepszenia elementu <details>

Sam element <details> jest już dostępny w ramach podstawowej wersji docelowej. Został on uwzględniony w Interop 2025, ponieważ zawiera wiele funkcji, które sprawiają, że widżety informacji o uprawnieniach z <details> są bardziej przydatne.

Element <details> zawiera element <summary>, który jest widoczny na stronie, gdy element <details> jest zwinięty. Poza elementem <summary> znajduje się zawartość elementu <details>, która jest ukryta, dopóki użytkownik nie kliknie podsumowania.

Jedną z rzeczy, które są objęte interoperacyjnością w ramach projektu Interop 2025, jest ukrywanie treści za pomocą atrybutu content-visibility zamiast atrybutu display, co oznacza, że jeśli treści nie zostaną rozwinięte, w ogóle nie zostaną one wyświetlone.

Element pseudo::marker jest też częścią projektu Interop 2025. Pseudoelement ::marker pozwala stylizować trójkąt wyświetlania elementu <summary>.

summary::marker {
  content: "+ ";
  font-family: monospace;
  color: red;
  font-weight: bold;
}

Następnie kolejny pseudoelement: ::details-content.

::details-content reprezentuje zawartość, czyli część elementu szczegółów, która się rozwija i zwija oraz umożliwia jej stylizowanie.

[open]::details-content {
  border: 5px dashed hotpink;
}

Wprowadziliśmy też kilka przydatnych ulepszeń, takich jak automatyczne rozwijanie elementu <details> w przypadku dopasowań na stronie oraz przenoszenie wartości atrybutu HTML hidden (until-found) do punktu odniesienia Nowo dostępne. Element jest ukryty, dopóki nie zostanie znaleziony za pomocą wyszukiwania na stronie w przeglądarce lub dopóki nie nastąpi przejście do niego bezpośrednio za pomocą fragmentu adresu URL.

CSS @scope

Reguła @scope w CSS pozwala ograniczyć zasięg selektorów. Po ustawieniu katalogu ograniczonego za pomocą @scope wszystkie reguły stylu zagnieżdżone w at-rule mają zastosowanie tylko do tego drzewa DOM.

Jeśli na przykład chcesz kierować reklamy tylko na elementy <img> w elemencie o klasie .card, element .card stanie się korzeniami zakresu.

@scope (.card) {
    img {
        border-color: green;
    }
}

Więcej informacji znajdziesz w artykule Ograniczanie zasięgu selektorów za pomocą atrybutu @scope w at-rule CSS.

scrollend

Inną funkcją, która zmniejsza złożoność i ulepsza interfejsy przewijania, jest scrollend. Bez zdarzenia scrollend nie ma niezawodnego sposobu wykrywania, że przewijanie zostało zakończone.

// before scrollend
document.onscroll = event => {
  clearTimeout(window.scrollEndTimer)
  window.scrollEndTimer = setTimeout(callback, 100)
}

Dzięki zdarzeniu scrollend przeglądarka wykonuje za Ciebie całą tę trudną ocenę.

document.onscrollend = event => {…}

Więcej przykładów znajdziesz w artykule Scrollend – nowe zdarzenie JavaScript.

Przejścia w tym samym dokumencie

Ostatnią, ale nie mniej ważną rzeczą są przejścia między widokami, które są częścią Interop 2025. Praca dotyczy przejść w tym samym dokumencie, czyli przejść w aplikacjach jednostronicowych, a także klas przejść.

Śledź postępy projektu na pulpicie Interop 2025, aby dowiedzieć się, jak rozwija się on w ciągu roku.

Funkcje zawarte w Interop 2025 nie będą jedynymi, które w tym roku staną się częścią Podstawy, ale ich uwzględnienie w projektach jest dobrym znakiem, że są one priorytetowe i wkrótce się pojawią.

Właśnie zaczynamy

To był ekscytujący rok dla Baseline. Od ogłoszeń z ubiegłego roku przeszliśmy długą drogę. W tej chwili uzupełnienie danych funkcji internetowych jest już zakończone. To otworzyło drogę do tworzenia narzędzi dla programistów. To dopiero początek. Jeśli masz produkt lub narzędzie typu open source, któremu przydałoby się uwzględnienie tych danych, chętnie się z Tobą skontaktujemy.

Śledź stronę web.dev, na której będziemy publikować ogłoszenia o nowych narzędziach i samouczki, które pomogą Ci w korzystaniu z wszystkich możliwości internetu.